<template>
    <view class="max-w-screen mb-10">
        <swiper
            class="swiper-box h-[400rpx] rounded-lg overflow-hidden"
            :indicator-dots="indicatorDots"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration">
            <swiper-item v-for="(item, index) in data" :key="index">
                <image class="w-full h-full" :src="item" mode="aspectFill" />
            </swiper-item>
        </swiper>
    </view>
</template>

<script setup lang="ts">
interface Props {
    data: any[];
    indicatorDots: boolean;
    autoplay: boolean;
    interval: number;
    duration: number;
}
const props = withDefaults(defineProps<Partial<Props>>(), {
    data: () => [
        "https://picsum.photos/id/47/1200/600",
        "https://picsum.photos/id/27/1200/600",
        "https://picsum.photos/id/57/1200/600",
        "https://picsum.photos/id/67/1200/600"
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 500
});
</script>

<style scoped lang="scss"></style>
